<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="IE=edge" http-equiv="X-UA-Compatible" />
  <meta
    content="width=device-width,initial-scale=1.0,user-scalable=no"
    name="viewport"
  />
  <link href="/logo.png" rel="icon" />
  <title>%VITE_API_TITLE%</title>
</head>
<body>
<div id="app">
  <style>
      html,
      body,
      #app {
          height: 100%;
          margin: 0px;
          padding: 0px;
          width: 100%;
      }

      .__spinner-container {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
      }

      .__spinner {
          position: relative;
          width: 68px;
          height: 68px;
          background-color: #41b883;
          animation: cube-shadow-spinner 1.8s cubic-bezier(0.75, 0, 0.5, 1) infinite;
      }

      @keyframes cube-shadow-spinner {
          50% {
              border-radius: 50%;
              transform: scale(0.5) rotate(360deg);
          }
          100% {
              transform: scale(1) rotate(720deg);
          }
      }
  </style>
  <div class="__spinner-container">
    <div class="__spinner"></div>
  </div>
</div>
<script src="/src/main.ts" type="module"></script>
<% if (ENABLE_ERUDA === "true") { %>
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>
  eruda.init();
</script>
<% } %>
<script>
  window.onload = function() {
    document.addEventListener("touchstart", function(event) {
      if (event.touches.length > 1) {
        event.preventDefault();
      }
    });

    var lastTouchEnd = 0;

    document.addEventListener(
      "touchend",
      function(event) {
        var now = new Date().getTime();
        if (now - lastTouchEnd <= 300) {
          event.preventDefault();
        }

        lastTouchEnd = now;
      },
      false
    );

    document.addEventListener("gesturestart", function(event) {
      event.preventDefault();
    });
  };
</script>
</body>
</html>
